<template>
  <div class="logins">
     <div>
      <h1><img src="@/img/login-logo.png" class="logo" alt=""></h1>
      <el-form
  ref="formRef"
  :model="dynamicValidateForm"
  label-width="120px"
  class="demo-dynamic"
  :rules="rules"
  
>
  <el-form-item
   
    prop="username"
  >
    <el-input v-model="dynamicValidateForm.username" placeholder="账号" class="inp" />
  </el-form-item>
  <el-form-item
 
    prop="pwd"
  >
   <el-input v-model="dynamicValidateForm.pwd" placeholder="密码" class="inp"  />

    
  </el-form-item>
  <el-form-item
    
    prop="code"
  >
  <el-row :gutter="20">
  <el-col :span="16">  <el-input v-model="dynamicValidateForm.code" placeholder="验证码" /></el-col>
  <el-col :span="8"><img class="loginimg" :src="codeurl" alt="" @click="btnclick"></el-col>
</el-row>
  
    
  </el-form-item>
  <el-form-item>
    <el-button type="primary" class="btn" @click="submitForm(formRef)">登录</el-button>
  </el-form-item>
</el-form>
     </div>
  </div>    
  </template>
  <script setup>
  import { useRouter } from 'vue-router'

 import {login} from '../../api/index'
  import { reactive, ref } from 'vue'
  import { uuid } from 'vue-uuid'
const uuidID=uuid.v4()
const router = useRouter()
const codeurl=ref(`/api/captcha.jpg?uuid=${uuidID}`)
const formRef = ref()
const dynamicValidateForm = reactive({
username:'',
pwd: '',
code:""
})

const submitForm = (formEl) => {
if (!formEl) return
formEl.validate((valid) => {
  if (valid) {
    login({
      credentials:dynamicValidateForm.pwd,
      imageCode:dynamicValidateForm.code,
      principal:dynamicValidateForm.username,
      sessionUUID:uuidID

    }).then(res=>{
      console.log(res);
      if(res.status === 200){
        localStorage.setItem('token',res.data.access_token)
        router.push({ path: 'index' })
      }
     
    })
  } else {
    console.log('error submit!')
    return false
  }
})
}
const rules =reactive({
  username:[
      {
          required:true,
          message:"请输入用户名",
          trigger:"blur"
      },
     
  ],
   pwd:[
          {
              required:true,
          message:"请输入密码",
          trigger:"blur"
          }
      ],
      code:[
          {
              required:true,
          message:"请输入验证码",
          trigger:"blur"
          }
      ]
}) 
  </script>
  <style>
.logins{
  text-align: center;
  width:100%;
  height: 100%;
  background: url(@/img/login-bg.png) no-repeat;
  background-size: cover;
position: fixed;
top: 0;
left: 0;

}
.loginimg{
  width: 100px;
  height: 30px;
}
.inp{
  width: 300px;
}
.demo-dynamic{
  width: 550px;
  height: 400px;
  margin: auto;
}
.logo{
  width: 205px;
  height: 62.5px;
}
h1{
  margin-top: 150px;
}
.btn{
  width: 300px;
  text-align: center;
}
</style>